<template>
  <div class="container">
    <!--  搜索框-->
    <div class="headerSearch">
      <el-card class="box-card" style="height: 75px;margin-bottom: 10px">
        <el-row type="flex">
          <el-col :span="5">
            <el-input
                placeholder="输入储位名称"
                prefix-icon="el-icon-search"
                style="height: 30px"
                v-model="keyworld"

            >
            </el-input>
          </el-col>
          <el-col :span="6" style="margin-left: 5px">
            <el-button type="primary" plain icon="el-icon-search" @click="searchPosition">搜索储位</el-button>
            <el-button type="primary" plain icon="el-icon-plus" @click="addPosition">添加储位</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <el-card class="box-card" style="height: 450px">
      <el-row type="flex">
        <el-col :span="4">
          <el-tabs tab-position="left" style="height: 580px;" v-model="selectPosition" @tab-click="chosePosition">

            <el-tab-pane  v-for= "item in positionList"
                          :label="item.positionName"
                          :name="item.id">

            </el-tab-pane>

          </el-tabs>
        </el-col>

        <el-col :span="20"  >
          <div class="header">
            <span style="color: deepskyblue;font-weight: 700">基本信息</span>

            <span style="margin-left: 5px"><a href="javascript:void(0)" style="color: orange;font-weight: 200" >修改</a></span>
            <span style="margin-left: 5px"><a href="javascript:void(0)" style="color: orangered; font-weight: 200;" @click="del">删除</a></span>
            <!--        内容展示区-->
            <div class="content" style="margin-left: -5px">

              <el-row type="flex">
                <el-col :span="5">库区名称</el-col>
                <el-col :span="5">库区编号</el-col>
                <el-col :span="5">库区类型</el-col>
              </el-row>

              <el-row type="flex" style="margin-top: -13px">
                <el-col :span="5">{{positionName}}</el-col>
                <el-col :span="5">{{positionNumber}}</el-col>
                <el-col :span="5">{{positionType}}</el-col>
              </el-row>
            </div>

            <div class="info">
              <el-tabs v-model="first">
                <el-tab-pane label="储位信息" name="first" ></el-tab-pane>
              </el-tabs>
              <el-row type="flex">
                <el-col :span="5">
                  <el-input
                      placeholder="请输入商品名称"
                      v-model="keyworld"
                      prefix-icon="el-icon-search"
                      style="height: 30px"
                      >
                  </el-input>
                </el-col>
                <el-col :span="6" style="margin-left: 5px">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addGoodsM">添加商品</el-button>
                  <el-button type="primary" plain icon="el-icon-search" @click="searchGoods">搜索商品</el-button>
                </el-col>
              </el-row>
              <el-table
                  ref="multipleTable"
                  :data="goodsList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="selectGoods">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="goodsName"
                    label="商品名称"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="line"
                    label="商品状态"
                    :formatter="linState"
                    show-overflow-tooltip
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="goodsCostPrice"
                    label="成本价"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="goodsSalesPrice"
                    label="销售价"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="isPiece"
                    label="按件销售"
                    :formatter="choseStatePiece"
                    width="100"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="isWeight"
                    label="按重量销售"
                    :formatter="choseIsWeight"
                    width="120"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="unit"
                    label="单位"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="createUserName"
                    label="创建人"
                    show-overflow-tooltip>
                </el-table-column>


                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="lastUpdateTime"
                    label="上次更新时间"
                    width="140"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="lastUpdateUserName"
                    label="上次更新人"
                    width="140"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="supplierName"
                    label="供应商"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="goodsTypeName"
                    label="商品分类"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="160">
                  <template slot-scope="scope">
                    <el-button @click="updateGoods(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delGoods(scope.row)" type="text" size="small" >删除</el-button>
                  </template>
                </el-table-column>


              </el-table>
              <el-row>
                <el-col :span="12">
                  <el-pagination
                      @size-change="changePageSize"
                      @current-change="changeCurrentChange"
                      background
                      layout="prev, pager, next,sizes"
                      :page-size="0"
                      :page-sizes="[1]"
                      :current-page="page"
                      :total="total">
                  </el-pagination>
                </el-col>
                <el-col :span="12">
                  <span>共计{{total}}条数据</span>
                </el-col>
              </el-row>

            </div>
          </div>
          <!--        查看库区下面的储位信息-->
        </el-col>

      </el-row>
    </el-card>

    <!--  储位信息对话框-->
    <!--  修改仓库对话框-->


    <!--  添加仓库对话框-->
<!--    添加储位信息-->
    <el-dialog title="添加储位" :visible.sync="showAddPosition" :append-to-body="true" @open="openAddPosition">
      <addposition></addposition>
    </el-dialog>
<!--    添加商品对话框-->

    <el-dialog title="添加商品" :visible.sync="showAddGoods" :append-to-body="true" @open="openAddGoods">
      <addgoods></addgoods>
    </el-dialog>

    <el-dialog title="修改商品" :visible.sync="showUpdateGoods" :append-to-body="true" @open="openUpdateGoods" >
      <updateGoods></updateGoods>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import addposition from "@/components/warehouse/addposition";
import addgoods from "@/components/warehouse/addgoods";
import updateGoods from "@/components/warehouse/updateGoods";
export default {
  name: "position",
  data(){
    return{
      warehouseAreaId:null,
      positionName: "",
      positionNumber:'',
      positionType:'',
      first:'first',
      positionList:[],
      keyworld:'',
      selectPosition:'',
      keyWorld:'',
      obj:[],
      goodsList:[],
      page:1,
      size:1,
      total:0,
      showAddPosition:false,
      showAddGoods:false,
      showUpdateGoods:false,
      goodsId:null,
    }
  },
  components:{
    addposition,
    addgoods,
    updateGoods
  },
  methods:{
    //打开修改商品对话框
    openUpdateGoods(){
      // let supplierList =[];
      // let goodsTypeList = [];
      let goodsId = this.goodsId;

      async function waiteData(){
        await   axios.get('http://localhost:8080/api/supplier/findAll')
            .then((resp)=>{
              //查找所有供应商信息
              let data = resp.data.data;
              console.info(data)
              for (let i = 0; i < data.length; i++) {
                let obj ={
                  label:data[i].supplierName,
                  value: data[i].id
                }
                //将供应商信息添加到数组中
                // supplierList.push(obj)
              }
            }).catch(resp=>{
            })
          axios.get("http://localhost:8080/api/classify/findAll")
            .then((resp)=>{
              if (resp.data.code==200){
                let data = resp.data.data;
                for (let i = 0; i < data.length; i++) {
                  let obj ={
                    label:data[i].classifyName ,
                    value:data[i].id
                  }
                  // this.goodsTypeList.push(obj)
                }
              }
            })

      }
      //等待数据加载完毕
      waiteData();
    },
    addGoodsM(){
      this.showAddGoods=true;
    },
    //打开添加商品对话框回调接口
    openAddGoods(){

    },
    //删除商品信息
    delGoods(row){
      let ids=[row.id];
      axios({
        method:'post',
        url:"http://localhost:8080/api/goods/delete",
        data:ids
      }).then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
      })
      //重新加载商品信息
      this.loadingGoodsInfo(this.selectPosition);
    },
    //修改商品信息
    updateGoods(row){
      //打开修改商品对话框
      this.goodsId=row.id;
      this.showUpdateGoods=true;
      alert('打开完毕')
    },
    //删除储位信息
    del(){
      let id =this.selectPosition;
      this.$confirm('你确定要删除吗','提示',{
        confirmButtonText:"确定",
        cancelButtonClass:"取消",
        type:'warning'
      }).then(()=>{
        axios({
          method:'delete',
          url:"http://localhost:8080/api/position/delete/"+id
        }).then((resp)=>{
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:'success'
            })
            this.flushPositionList(true,null);
          }
          else this.$message({
            message:resp.data.msg,
            type:'error'
          })
        })
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消'
        })
      })
    },
    searchGoods(){
      axios.get('http://localhost:8080/api/goods/findByNameLike?keyWorld='+this.keyworld)
      .then((resp)=>{
        if (resp.data.code==200){
          this.goodsList=resp.data.data.splice(0,1);
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
      })
    },
    flushPositionList(search,list){
      if (search){
        axios.get("http://localhost:8080/api/position/findListByWarehouseAreaId/"+this.warehouseAreaId)
        .then(resp=>{
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:'success'
            })
            //设置展示的储位信息，并设置当前激活的选项
            let data = resp.data.data;

            if (data!=null&&data.length>=1){
              this.positionName=data[0].positionName;
              this.positionNumber=data[0].positionNumber;
              this.positionType=data[0].positionTypeName
              //设置当前的激活项
              this.selectPosition=data[0].id
            }
            else {
              this.positionName='';
              this.positionNumber=''
              this.positionType=''
            }
            this.positionList=resp.data.data
          }
          else this.$message({
            message:resp.data.msg,
            type:'error'
          })
        })
      }
      //手动传入了数据
      else {
        this.positionList=list;
        if (list.length>=1){
          this.positionName=list[0].positionName;
          this.positionNumber=list[0].positionNumber;
          this.positionType=list[0].positionTypeName;
          this.selectPosition=list[0].id;
        }
        else {
          this.positionName='';
          this.positionNumber=''
          this.positionType=''
        }
      }
      //重新加载商品信息
      this.loadingGoodsInfo(this.selectPosition)
    },
    //添加储位信息
    addPosition(){
      this.showAddPosition=true
    },
    openAddPosition(){
      setTimeout(()=>{
        this.$bus.$emit("giveMeWarehouseAreaId",this.warehouseAreaId)
      },0)
    },
    searchPosition(){
      axios.get("http://localhost:8080/api/position/findListByNameLike?keyWorld="+this.keyworld)
      .then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          //刷新数据
          this.flushPositionList(false,resp.data.data)
        }
        else this.$message({
          message:'失败',
          type:'error'
        })
      })
    },
    choseStatePiece(row,column,cellValue,index){
      return row.isPiece=='0'||row.isPiece==0?"是":'否'
    },
    choseIsWeight(row,column,cellValue,index){
      return row.isWeight=='0'||row.isPiece==0?"是":'否'
    },
    linState(row,column,cellVaue,index){
      if (row.line==0) return"未入库"
      else if (row.line==1) return "已入库";
      else return "正在使用";
    },
    //改变每页显示条数
    changePageSize(val){
      this.size=val;
      this.loadingGoodsInfo(this.selectPosition)
    },
    //改变当前页
    changeCurrentChange(val){
      this.page=val;
      this.loadingGoodsInfo(this.selectPosition)
    },

    //上一页
    lastPage(){

    },
    //下一页
    nextPage(){

    },
    chosePosition(id){
      this.selectPosition=this.positionList[id.index].id
      let positionListElement = this.positionList[id.index];
      this.positionName=positionListElement.positionName;
      this.positionNumber=positionListElement.positionNumber;
      this.positionType=positionListElement.positionTypeName
      //加载商品数据信息
      this.loadingGoodsInfo(this.positionList[id.index].id)
    },
    //加载商品信息
    loadingGoodsInfo(positionId){
      axios({
        url:'http://localhost:8080/api/goods/findByPositionId',
        method:'get',
        params:{
          "positionId":positionId,
          "page ":this.page,
          "size":this.pageSize
        }
      }).then((resp)=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          this.goodsList=resp.data.data
          this.total=this.goodsList.length;
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
      })
    },
    selectGoods(obj){

    }
  },
  mounted() {
    //关闭添加商品对话框
    this.$bus.$on('closeAddGoods',(flag)=>{
      //是否需要刷新数据
      if (flag) this.loadingGoodsInfo(this.selectPosition)
      this.showAddGoods=false;
    })
    //关闭添加储位对话框
    this.$bus.$on('closeAddPosition',(flag,warehouseAreaId)=>{
      //需要刷新数据
      if (flag){
        this.warehouseAreaId=warehouseAreaId
        this.flushPositionList(true,null)
      }
      this.showAddPosition=false;

    })
    //加载侧边栏储位信息
    this.$bus.$on('position',(warehouseAreaId,list)=>{
      this.warehouseAreaId=warehouseAreaId;
      //查找数据库
      this.positionList=list
      if (this.positionList!=null&&this.positionList.length>=1){
        this.selectPosition=list[0].id
        this.positionName=this.positionList[0].positionName;
        this.positionNumber=this.positionList[0].positionNumber
        this.positionType=this.positionList[0].positionTypeName
      }
      //加载货品信息
      axios({
        url:'http://localhost:8080/api/goods/findAll',
        method:'get',
        params:{
          "page":this.page,
          "size":999999
        },
      }).then(resp=>{
        if (resp.data.code!=200){
          this.$message({
            message:resp.data.msg,
            type:'error'
          })
        }
        else if (resp.data.data.length>=1){
          this.goodsList=resp.data.data
          this.total=this.goodsList.length
        }
      })
    })


  }
}
</script>

<style scoped>
.container{
  width: 98%;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.1);

}
.info{
  margin-top: 40px;
}
.header{

  padding: 0px 5px;
}
.content{
  margin-top: 5px;
  font-size: 15px;
}
</style>